const batchBtn = document.querySelector('#toggleBatchBtn');
const batch = document.querySelector('#batch');
// 获取班级概况
getStudentOverview()
// 获取折线图与饼图数据并生成图标
getStudentList()
// 获取到第一组的数据
getScoreBatch(1)
// 点击事件
batchBtn.addEventListener('click', function (e) {
    batch.classList.toggle('show')
})
batch.addEventListener('click', function (e) {
    if (e.target.nodeName === 'A') {
        const index = e.target.dataset.index
        getScoreBatch(index)
    }
})


// 获取班级概况
function getStudentOverview() {
    axios.get('/student/overview')
        .then(result => {
            const { total, avgSalary, avgAge, proportion } = result.data.data
            document.querySelector('.total').innerText = total;
            document.querySelector('.avgSalary').innerText = avgSalary;
            document.querySelector('.avgAge').innerText = avgAge;
            document.querySelector('.proportion').innerText = proportion;
        })
}
// 生成折线图
function salaryLine() {
    axios.get('/student/list')
        .then(result => {
            const list = result.data.data
            const salarys = list.map(v => v.salary)
            const truesalarys = list.map(v => v.truesalary)
            const names = list.map(v => v.name)
            // 获取折线图生效的区域对象
            const myChart = echarts.init(document.querySelector('.line'))
            // 折线图具体配置
            const option = {
                // 折线颜色
                color: ['red', 'blue'],
                title: {
                    text: '薪资 Salary'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: false,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: names
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                // 折线图下方的控制条模块
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 10
                    },
                    {
                        start: 0,
                        end: 10
                    }
                ],
                series: [
                    {
                        name: '期望薪资',
                        type: 'line',
                        smooth: true, // 线条平滑
                        symbol: 'circle', // 实心
                        data: salarys
                    },
                    {
                        name: '实际薪资',
                        type: 'line',
                        smooth: true, // 线条平滑
                        symbol: 'circle', // 实心
                        data: truesalarys
                    }
                ]
            };
            myChart.setOption(option)
        })

}
// 饼图
function hometown() {
    axios.get('/student/list')
        .then(result => {
            const list = result.data.data
            const newList = []
            list.forEach(v => {
                const index = newList.findIndex(vv => vv.name === v.province)
                if (index === -1) {
                    newList.push({ value: 1, name: v.province })
                } else {
                    newList[index].value++
                }
            });

            // 获取折线图生效的区域对象
            const myChart = echarts.init(document.querySelector('.pie'))
            const option = {
                title: { text: '籍贯 hometown' },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [50, 150],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: newList
                    }
                ]
            };
            myChart.setOption(option)
        })
}
// 获取折线图与饼图数据并生成图标
function getStudentList() {
    axios.get('/student/list')
        .then(result => {
            const list = result.data.data
            // 生成折线图
            salaryLine(list)
            // 饼图
            hometown(list)
        })
}
// 获取根据组别查询成绩信息并生成柱状图
function getScoreBatch(batch) {
    axios.get('/score/batch', { params: { batch } })
        .then(result => {
            // avgScore 平均分
            // group 组别
            // gt60 60-80分的人数
            // gt80 大于80分的人数
            // lt60 小于60分的人数
            const { avgScore, group, gt60, gt80, lt60 } = result.data.data
            // 生成柱状图
            const myChart = echarts.init(document.querySelector('.barChart'))
            const option = {
                // grid 是指图标到盒子div的距离。默认是top60 bottom60
                grid: {
                    top: 30,
                    bottom: 20
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: ['平均分', '小于60分的人数', '60-80分的人数', '80分以上的人数']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: group,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '分数',
                        min: 0,
                        max: 100,
                        interval: 10,
                        axisLabel: {
                            formatter: '{value}分'
                        }
                    },
                    {
                        type: 'value',
                        name: '人数',
                        min: 0,
                        max: 10,
                        interval: 1,
                        axisLabel: {
                            formatter: '{value}人'
                        }
                    }
                ],
                series: [
                    {
                        name: '平均分',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '分';
                            }
                        },
                        data: avgScore
                    },
                    {
                        name: '小于60分的人数',
                        type: 'bar',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '人';
                            }
                        },
                        data: lt60
                    },
                    {
                        name: '60-80分的人数',
                        type: 'bar',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '人';
                            }
                        },
                        data: gt60
                    }, {
                        name: '80分以上的人数',
                        type: 'bar',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '人';
                            }
                        },
                        data: gt80
                    },

                ]
            };
            myChart.setOption(option)
        })
}
